<template>
	<div class="bgc-default pad-20">
		<div class="tab-sticky">
			<el-tabs v-model="activeName">
<!--				<el-tab-pane label="汇总查询" name="0" v-if="memberId == null || memberId == ''"></el-tab-pane>-->
				<el-tab-pane label="日报表" name="1" v-if="memberId == null || memberId == ''"></el-tab-pane>
				<el-tab-pane label="商品报表" name="2"></el-tab-pane>
				<el-tab-pane label="订单报表" name="3"></el-tab-pane>
			</el-tabs>
		</div>
		<template v-if="activeName == '0'">
			<div class="bg-color-white pad-20 mar-t-20">
				<div>
					<div style="float: left; margin-top: 5px">
						<el-radio-group v-model="tabPosition" style="margin-bottom: 20px;" @change="tabPositionChange">
							<el-radio-button label="0">日统计</el-radio-button>
							<el-radio-button label="1">月统计</el-radio-button>
						</el-radio-group>
					</div>
					<div style="float: right; margin-top: 5px">
						<template v-if="tabPosition === '0'">
							<el-date-picker v-model="dateTimeMonth" type="month" value-format="yyyy-MM"
								placeholder="选择月" @change="dateTimeMonthChange">
							</el-date-picker>
						</template>
						<template v-if="tabPosition === '1'">
							<el-date-picker v-model="dateTimeYear" type="year" value-format="yyyy" placeholder="选择年"
								@change="dateTimeYearChange">
							</el-date-picker>
						</template>
						<el-button type="primary" @click="exportClick">导出报表</el-button>
					</div>
				</div>
				<!-- 内容列表 -->
				<div class="table-container">
					<el-table :data="entityList" @selection-change="handleSelectionChange" v-loading="listLoading"
						element-loading-text="加载中" style="width: 100%" header-cell-class-name="default-header"
						row-class-name="default-row">
						<el-table-column width="55px" type="selection"></el-table-column>
						<el-table-column width="240px" label="统计日期">
							<template slot-scope="scope">
								<template
									v-if="scope.row.type === 0">{{ scope.row.transactionTime | dateFilter }}</template>
								<template
									v-if="scope.row.type === 1">{{ scope.row.transactionTime | dateFilterType('month') }}</template>
							</template>
						</el-table-column>
						<el-table-column width="240px" :label="getVersionType() == 3 ? '充值金额(元)' : '收入金额(元)'">
							<template slot-scope="scope">
								<span style="color: green">+{{ scope.row.rechargeAmount}}</span>
							</template>
						</el-table-column>
						<el-table-column width="240px" label="支出金额(元)">
							<template slot-scope="scope">
								<span style="color: red">-{{ scope.row.expenditureAmount}}</span>
							</template>
						</el-table-column>
						<el-table-column width="240px" label="余额(元)" prop="balance"></el-table-column>
						<el-table-column min-width="140px" label="操作" align="right" fixed="right">
							<template slot-scope="scope">
								<el-button type="text" size="medium" @click="handleDetails(scope.row)">查看详情</el-button>
							</template>
						</el-table-column>
					</el-table>
				</div>
				<!-- 列表分页 -->
				<div class="pagination">
					<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
						:current-page="entityListQuery.currentPage" :page-sizes="[10, 20, 50, 100]"
						:page-size="entityListQuery.size" layout="total, sizes, prev, pager, next, jumper"
						:total="total">
					</el-pagination>
				</div>
			</div>
		</template>
		<template v-if="activeName == '1'">
			<div class="bg-color-white pad-20 mar-t-20">
				<day-count></day-count>
			</div>
		</template>
		<template v-if="activeName == '2'">
			<div class="bg-color-white pad-20 mar-t-20">
				<orderGoodsReport></orderGoodsReport>
			</div>
		</template>
		<template v-if="activeName == '3'">
			<div class="bg-color-white pad-20 mar-t-20">
				<orderReport></orderReport>
			</div>
		</template>
	</div>
</template>

<script>
	import {
	  pagingFinaceAccountStatement,
	  exportFinaceAccountStatement
	} from '@/api/finace/finaceAccountStatement'
	import {
	  getToken
	} from '@/utils/auth'
	import {
	  formatTimeToDate,
	  formatTimeToDateByType
	} from '@/api/common/date'
	import dayCount from './day-count'
	import orderReport from './order-report'
	import orderGoodsReport from './order-goods-report'
	export default {
	  components: {
	    dayCount,
	    orderReport,
	    orderGoodsReport
	  },
	  data() {
	    return {
	      activeName: '1',
	      tabPosition: '0',
	      dateTime: '',
	      dateTimeMonth: '',
	      dateTimeYear: '',
	      entityListQuery: {
	        currentPage: 1,
	        size: 10,
	        enterpriseId: this.getEnterpriseId()
	      },
	      entityList: [],
	      listLoading: true,
	      multipleSelection: [],
	      total: null
	    }
	  },
	  created() {
	    this.memberId = this.getMemberId()
	    this.activeName = !this.memberId ? '1' : '2'
	    this.dateTimeYear = formatTimeToDateByType(new Date(), 'year').toString()
	    this.dateTimeMonth = formatTimeToDateByType(new Date(), 'month').toString()
	    this.dateTime = this.dateTimeMonth
	    this.token = {
	      accessToken: getToken()
	    }
	    this.initPage()
	  },
	  filters: {
	    dateFilter(e) {
	      if (e != null) {
	        const date = formatTimeToDate(e)
	        return date
	      }
	      return e
	    },
	    dateFilterType(e, type) {
	      if (e != null) {
	        const date = formatTimeToDateByType(e, type)
	        return date
	      }
	      return e
	    }
	  },
	  methods: {
	    initPage() {
	      if (this.tabPosition === '0') {
	        this.entityListQuery.dateTime = this.dateTimeMonth
	      }
	      if (this.tabPosition === '1') {
	        this.entityListQuery.dateTime = this.dateTimeYear
	      }
	      this.entityListQuery.type = this.tabPosition
	      pagingFinaceAccountStatement(this.entityListQuery).then(response => {
	        if (response.isError) return
	        this.entityList = response.data.records
	        this.listLoading = false
	      })
	    },
	    exportClick() {
	      const entity = {
	        enterpriseId: this.getEnterpriseId(),
	        type: this.tabPosition,
	        dateTime: this.tabPosition === '0' ? this.dateTimeMonth : this.dateTimeYear
	      }
	      window.open(exportFinaceAccountStatement(entity), '_blank')
	    },
	    tabPositionChange() {
	      this.initPage()
	    },
	    dateTimeMonthChange() {
	      this.dateTime = this.dateTimeMonth
	      this.initPage()
	    },
	    dateTimeYearChange() {
	      this.dateTime = this.dateTimeYear
	      this.initPage()
	    },
	    handleSearch() {
	      this.initPage()
	    },
	    reset() {
	      this.entityListQuery = {
	        currentPage: 1,
	        size: 10,
	        enterpriseId: this.getEnterpriseId()
	      }
	      this.initPage()
	    },
	    // 详情
	    handleDetails(row) {
	      this.$router.push({
	        path: '/finace/account-statement/detail/index',
	        query: {
	          entity: row,
	          dateTime: row.transactionTime,
	          type: this.tabPosition
	        }
	      })
	    },
	    rechargeClick() {
	      this.financeVisible = true
	    },
	    handleSizeChange(val) {
	      this.entityListQuery.size = val
	      this.initPage()
	    },
	    handleCurrentChange(val) {
	      this.entityListQuery.currentPage = val
	      this.initPage()
	    },
	    // 勾选
	    handleSelectionChange(val) {
	      this.multipleSelection = val
	    }
	  }
	}
</script>
<style lang="less" scoped>
	.tab-sticky {
		position: sticky;
		top: 0px;
		left: 20px;
		width: calc(100% + 40px);
		background: white;
		z-index: 1000;
		padding-top: 10px;
		padding-left: 17px;
		margin-left: -20px;
		margin-top: -20px;

		/deep/ .el-tabs__header {
			margin: 0;
		}
	}
</style>
